<template>
  <div class="table-box-cont">
    <div class="table">
      <el-table
        stripe
        v-loading="loading"
        :data="list.list"
        @row-click='toTransaction'
        style="width: 100%">
        <el-table-column
          prop="name"
          width="200px"
          label="名称">
          <template slot-scope="scope">
            <div class="tab-name">
              <p>{{scope.row.name}}</p>
              <span class="code">
                {{scope.row.code}}
            </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="nowPrice"
          width="130px"
          align='right'
          label="现价">
          <template slot-scope="scope">
            <div class="price" >
              <div style="font-size: 12px;" :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">
                {{Number(scope.row.nowPrice).toFixed(2)}}
                <i v-if="scope.row.hcrate>0" class="iconfont icon-direction-top"></i>
                <i v-if="scope.row.hcrate<0" class="iconfont icon-direction-bottom"></i>
              </div>
            </div>
            <!-- <div v-if="scope.row.now_price" :class="changeTextClass[scope.$index] === true?'heartBeat  tab-number':' tab-number'">
              <p :class="scope.row.now_price - scope.row.buyOrderPrice < 0?'green bounceIn':scope.row.now_price - scope.row.buyOrderPrice > 0?'bounceIn red':'bounceIn'">
                {{scope.row.now_price === 0?'-':scope.row.now_price}}
              </p>
            </div> -->
          </template>
        </el-table-column>
        <el-table-column
          prop="hcrate"
          align='right'
          label="涨跌幅">
          <template slot-scope="scope">
            <div class="price">
              <div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">
                {{Number(scope.row.hcrate).toFixed(2)}}%
                <!-- <i v-if="scope.row.hcrate>0" class="iconfont icon-up"></i>
                <i v-if="scope.row.hcrate<0" class="iconfont icon-down"></i> -->
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="today_max"
          align='right'
          label="最高">
          <!-- <template slot-scope="scope">
              <div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">{{scope.row.today_max}}</div>
          </template> -->
        </el-table-column>
        <el-table-column
          prop="today_min"
          align='right'
          label="最低">
          <!-- <template slot-scope="scope">
              <div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">{{scope.row.today_min}}</div>
          </template> -->
        </el-table-column>
        <el-table-column
          class="tab-name"
          align='center'
          label="走势图"
          width="370px"
        >
          <template slot-scope="scope">
            <chart-box :code="scope.row.code"></chart-box>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box text-center">
        <!-- <a class="more-btn" href="javascript:;">
          加载更多
          <i class="iconfont icon-xiasanjiao"></i>
        </a> -->
        <el-pagination
          class="pull-right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="list.pageNum"
          :page-sizes="[10, 20, 30, 40,50]"
          :page-size="list.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.total">
        </el-pagination>
      </div>

    </div>
  </div>

</template>

<script>
  // import * as api from '../../../axios/api'
  import ChartBox from './chart'

  export default {
    components: {
      ChartBox
    },
    props: {
      list: {
        type: Object,
        default () {
          return {
            list: []
          }
        }
      },
      getData: {
        type: Function,
        default: function () {}
      },
      handleOptions: {
        type: Function,
        default: function () {}
      }
    },
    data () {
      return {
        loading: false,
        refresh: false // 刷新中
      }
    },
    watch: {},
    computed: {},
    mounted () {
    },
    methods: {
      handleSizeChange (size) {
        this.handleOptions({ pageSize: size })
        this.getData()
      },
      handleCurrentChange (page) {
        this.handleOptions({ pageNum: page })
        this.getData()
      },
      toTransaction (row, column, event) {
        // 去交易界面
        this.$router.push({
          path: '/transaction',
          query: {
            code: row.code
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
	
  .table {
    min-height: 500px;

    .code {
      color: #6d718b;
      font-size: 12px;
    }

    .more-btn {
      text-align: center;
      color: #8f92a3;
    }

    /*/deep/ th.el-table_1_column_1 {*/
      /*padding-left: 50px;*/
    /*}*/

    /deep/ .el-table th>.cell {
      padding-left: 60px;
    }
  }
</style>
